<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <link type="text/css" rel="stylesheet" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/animate.css}"/>

</head>
<body>
<!--图书列表 begin-->
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3 " th:each="book:${bookList}">
            <div class="thumbnail">
                <a th:href="@{/book/detail(bookId=${book.getId()})}"><img th:src="@{'/images/'+${book.getImgUrl()}}" alt="通用的占位符缩略图"></a>
                <div class="caption">
                    <h3 th:classappend="h3-height" th:text="${book.getName()}"></h3>
                    <p th:classappend="p-height">
                        价格:<span th:text="${book.getNewPrice()}"></span>元&nbsp;&nbsp;
                        作者:<span th:text="${book.getAuthor()}"></span>&nbsp;&nbsp;</p>
                    <p>
                        <a href="details.html">
                            更多信息
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--分页begin-->
<div class="container">
    <div class="row text-center">
        <div class="col-md-12">
            <ul class="pagination">

                <li>
                    <a th:onclick="loadData(1,[[${pageSize}]],[[${category}]])">首页</a>
                </li>

                <li th:class="${cur == 1}?'disabled':''">
                    <a th:onclick="loadData([[${pre}]],[[${pageSize}]],[[${category}]])">&laquo;</a>
                </li>

                <li th:each="i:${#numbers.sequence(1,pages)}" th:class="${cur == i}?'active':''">
                    <a th:text="${i}" th:onclick="loadData([[${i}]],[[${pageSize}]],[[${category}]])"></a>
                </li>

                <li th:with="mpage = ${pages}" th:class="${cur == mpage?'disabled':''}">
                    <a th:onclick="loadData([[${next}]],[[${pageSize}]],[[${category}]])">&raquo;</a>
                </li>

                <li>
                    <a style="border: 1px solid #ddd;" th:onclick="loadData([[${pages}]],[[${pageSize}]],[[${category}]])">尾页</a>
                </li>

                <li>
                    <a style="border: 0px;margin-left: 0px;" th:text="${'当前'+cur+'页/总'+pages+'页'}"></a>
                </li>

                <li>
                    <div id="search" class="input-group" style="positon:relative;">
                        <input id="inputPage" type="text" class="form-control" placeholder="跳转指定页"/>
                        <span class="input-group-btn">
                            <button class="btn btn-info btn-search" th:onclick="goToPage([[${pageSize}]],[[${category}]])">GO</button>
                        </span>
                    </div>
                </li>

                <li><a style="padding-top: 0px;border: 0px;">
                    <label>每页显示:</label>
                    <select id="pageSize" th:value="${pageSize}" class="form-control" style="width: 100px;display: inline;" th:onchange="|loadDataBySize(this)|">
                        <option value="2" th:selected="${pageSize == 2}">2</option>
                        <option value="4" th:selected="${pageSize == 4}">4</option>
                        <option value="6" th:selected="${pageSize == 6}">6</option>
                        <option value="8" th:selected="${pageSize == 8}">8</option>
                    </select>
                    <label>条</label>
                </a>
                </li>

            </ul>
        </div>
    </div>
</div>
<!--分页end-->

</body>
</html>
